<template>
    <div class="page home-ui">
        <ScrollPull @onDown="onDown">
            <cube-slide ref="slide" :data="bannerList">
                <cube-slide-item v-for="(item, index) in bannerList" :key="index">
                    <img style="width: 100%;height: 5.5rem" :src="item.img"/>
                </cube-slide-item>
            </cube-slide>
            <div class="ad">
                <img
                        style="width: 0.37rem;height: 0.32rem;margin: 0 0.32rem 0 0.28rem"
                        src="./img/horn.png"
                />
                <div class="marquee-outer-wrapper">
                    <div class="marquee-inner-wrapper">
                        <div class="first-marquee">{{ poster }}</div>
                    </div>
                </div>
            </div>
            <div class="type-box">
                <div class="type-item" v-for="(item, index) in typeList" :key="index" @click="goGoodsList">
                    <img class="type-img" :src="item.icon"/>
                    <span style="font-size: 0.3rem;">{{ item.content }}</span>
                </div>
            </div>
            <div class="type-box">
                <div class="item-box" v-for="(item, index) in loanList" :key="index" @click="goGoodsList">
                    <img :src="item.icon" style="width: 36%;"/>
                    <div class="info-box">
                        <p>{{ item.content.title }}</p>
                        <span>{{ item.content.info }}</span>
                    </div>
                </div>
            </div>
            <div class="second-box">
                <p>秒下款产品</p>
                <div class="title-box">
                    <div class="line-box"></div>
                    <span>同时申请4家以上，下款率达90%</span>
                    <div class="line-box"></div>
                </div>
                <div class="second-item">
                    <div
                            class="sec-item"
                            v-for="(item, index) in secondList"
                            :key="index"
                            @click="goGoodsList"
                    >
                        <img :src="item.img" style="width: 45px;height: 45px;"/>
                        <div class="second-info">
                            <div class="second-title">{{ item.content.title }}</div>
                            <div class="second-info">{{ item.content.info }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="all-loan">
                <p>热门借款</p>
                <div style="border-bottom: 1px #e5e5e5 solid;" v-for="(item, index) in organList" :key="index">
                    <div class="loan-list">
                        <div class="loan-info">
                            <img :src="getImgUrl(item.logo)" style="width: 58px;height: 58px;"/>
                            <div class="organ-info">
                                <div class="organ-name">{{ item.name }}</div>
                                <div class="organ-service">{{ item.keyword }}</div>
                                <div class="organ-peopleCount">
                  <span>{{ item.applyNumber }}</span
                  >人申请
                                </div>
                            </div>
                        </div>
                        <div class="apply-btn" @click="goDetails(item.id)">申请</div>
                    </div>
                    <div class="money-box">
                        <div class="money-item">
                            <div class="money-txt">额度(元)</div>
                            <div class="money-conter">{{item.loanLimit}}</div>
                        </div>
                        <div class="money-item">
                            <div class="money-txt">借款期限</div>
                            <div class="money-conter">{{item.loanTime}}</div>
                        </div>
                        <div class="money-item">
                            <div class="money-txt">日费率</div>
                            <div class="money-conter">{{item.dayPer}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </ScrollPull>
    </div>
</template>
<script>
    import ScrollPull from "../../components/Scroll/scrollPull";
    import {getGoodsList} from "../../api/home"

    export default {
        components: {
            ScrollPull
        },
        data() {
            return {
                poster: "心随指动，贷动天下   您用钱，我用心",
                page: 1,
                limit: 10,
                organList: [],
                secondList: [
                    {
                        img: "http://ryj.yunhushuju.com/Upload/image/20190509/5cd3af1628f8d.png",
                        content: {
                            title: "小爱钱包",
                            info: "1.9万人申请"
                        }
                    },
                    {
                        img: "http://ryj.yunhushuju.com/Upload/image/20190118/5c40cbc63d43b.png",
                        content: {
                            title: "易米金服",
                            info: "3.6万人申请"
                        }
                    },
                    {
                        img: "http://ryj.yunhushuju.com/Upload/image/20190509/5cd39f439b7d1.jpg",
                        content: {
                            title: "企鹅贷",
                            info: "2.3万人申请"
                        }
                    },
                    {
                        img: "http://ryj.yunhushuju.com/Upload/image/20180711/5b45624d51aae.png",
                        content: {
                            title: "随意付",
                            info: "1.6万人申请"
                        }
                    }
                ],
                loanList: [
                    {
                        icon: "http://ryj.yunhushuju.com/Public/images/icon_dabing1.png",
                        content: {
                            title: "贷款大全",
                            info: "汇聚各类网贷"
                        }
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Public/images/icon_dabing2.png",
                        content: {
                            title: "办信用卡",
                            info: "下卡快额度高"
                        }
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Public/images/icon_dabing3.png",
                        content: {
                            title: "我要赚钱",
                            info: "邀请朋友赚钱"
                        }
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Public/images/icon_dabing4.png",
                        content: {
                            title: "黑名单查询",
                            info: "老被拒？看是否黑了"
                        }
                    }
                ],
                typeList: [
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20180412/5acef0aca31bd.png",
                        content: "不查征信"
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20180412/5acef0402f948.png",
                        content: "身份证贷"
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20180412/5acef0bea417a.png",
                        content: "信用卡贷"
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20180412/5acef06cf307b.png",
                        content: "芝麻分贷"
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20180412/5acef016ecf22.png",
                        content: "手机号贷"
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20180412/5acef0ec517a6.png",
                        content: "公积金贷"
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20180504/5aebaff8f1481.png",
                        content: "大额贷"
                    },
                    {
                        icon: "http://ryj.yunhushuju.com/Upload/image/20190304/5c7ced5e8936e.png",
                        content: "抵押贷"
                    }
                ],
                bannerList: [
                    {
                        img: require("./img/homeBer.png")
                    }
                ]
            };
        },
        created() {
            this.onDown()
        },
        methods: {
            getImgUrl(url) {
                return process.env.VUE_APP_IMAGE_DOMAIN + url
            },
            goDetails: function(id) {
                this.$router.push({
                    path: "/details",
                    query: {
                        id: id
                    }
                })
            },
            goGoodsList: function() {
                this.$router.push({
                    path: "/findloan",
                })
            },
            onDown: function () {
                getGoodsList(this.page,this.limit).then(res=> {
                    if (res.data.length > 0) {
                        this.organList = this.organList.concat(res.data)
                        this.page++
                    }
                })
            }
        }
    };
</script>
<style type="text/stylus" lang="stylus" scoped>
    .home-ui
        margin-bottom 1.43rem;

        .cube-scroll-list-wrapper
            overflow hidden;
</style>
<style scoped type="text/stylus" lang="stylus">
    .page
        width 100%
        height 100%
        padding-bottom 1.43rem
        background #FFF

        .ad
            width 9.2rem
            height 0.59rem
            border-radius 4px
            margin 0.32rem auto
            border 1px #327A8A solid
            display flex
            justify-content start
            align-items center

            .marquee-outer-wrapper {
                overflow: hidden;
                width: 80%;
                display: flex;
                justify-content space-between
                align-items center
            }

            .marquee-inner-wrapper {
                height: 0.59rem;
                font-size: 14px;
                color: #333333;
                line-height: 0.59rem;
                margin: 0 auto;
                white-space: nowrap;
                position: relative;
            }

            .marquee-inner-wrapper span {
                position: absolute;
                top: 0;
                left: 100%;
                height: 100%;
            }

            .first-marquee {
                -webkit-animation: 3s first-marquee linear infinite normal;
                animation: 15s first-marquee linear infinite normal;
                padding-right: 70%;
            }

            @keyframes first-marquee {
                0% {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                }
                100% {
                    -webkit-transform: translate3d(-200%, 0, 0);
                    transform: translate3d(-200%, 0, 0);
                    display: none;
                }
            }

        .type-box
            border-top 0.3rem #e5e5e5 solid;
            display flex;
            flex-flow wrap;
            justify-content space-between;
            background-color #eee;

            .type-item
                width 25%;
                height 1.4rem;
                padding 0.3rem 0rem;
                display flex;
                justify-content space-between;
                flex-direction column
                align-items center;
                background-color #fff;
                .type-img
                    width 37.5px;
                    height auto;
                    margin 0 auto 5px auto;
                    display block;

            .item-box
                width 37.8%;
                padding 0 6%;
                background-color #fff;
                height 2rem;
                margin-bottom 0.05rem;
                display flex;
                justify-content space-between;
                align-items center;

                .info-box
                    width 55%;
                    height 1rem;
                    display flex;
                    flex-direction column;
                    justify-content space-between;
                    color #515151;

                    p
                        font-size 0.4rem;

                    span
                        font-size 0.3rem;
                        color #999;

        .second-box
            border-top 0.3rem #e5e5e5 solid;

            p
                font-size 0.5rem;
                color #2e2e2e;
                text-align center;
                height 1rem;
                line-height 1.5rem;

            .title-box
                display flex;
                justify-content space-between;
                align-items center;
                height 1rem;
                padding 0 0.5rem;

                span
                    font-size 0.3rem;
                    color #666;

                .line-box
                    width 1.7rem;
                    border-top 0.05rem #eee solid;

            .second-item
                display flex;
                align-items center;
                justify-content space-between;

            .sec-item
                width 25%;
                height 2.6rem;
                padding 0.3rem 0;
                display flex;
                flex-direction column;

                align-items center;

                .second-info
                    display flex;
                    align-items center;
                    flex-direction column;
                    justify-content start;

                    .second-title
                        font-size 15px;
                        color #2e2e2e;
                        margin-top 0.4rem;

                    .second-info
                        font-size: 12px;
                        color: #999;
                        margin-top 0.2rem;

        .all-loan
            border-top 0.3rem #e5e5e5 solid;

            p
                font-size: 16px;
                padding: 0 10px;
                height 1rem;
                line-height 1rem;

            .loan-list
                margin-top 0.4rem;
                padding 0 0.3rem;
                display: flex;
                justify-content space-between;

                .loan-info
                    max-width 7rem;
                    display flex;
                    justify-content start;
                    align-items start;

                    .organ-info
                        margin-left 0.2rem;

                        .organ-name
                            font-size 16px;
                            color #2e2e2e;

                        .organ-service
                            overflow hidden;
                            text-overflow ellipsis;
                            white-space nowrap;
                            width 4rem;
                            color: #666666;
                            line-height 0.6rem;
                            font-size: 13px;

                        .organ-peopleCount
                            font-size 13px;
                            color #666

                            span
                                color red;

                .apply-btn
                    font-size 14px;
                    color #5461eb;
                    border 1px solid #5461eb;
                    padding 0 18px;
                    border-radius 10px;
                    line-height: 20px;
                    height: 20px;

            .money-box
                display flex;
                justify-content space-between;

                .money-item
                    width 33%;
                    border-right 1px solid #f0f0f0;
                    text-align center;
                    margin-top 0.3rem;

                    .money-txt
                        color: #999999;
                        font-size: 13px;

                    .money-conter
                        font-size: 19px;
                        color: #2e2e2e;
                        line-height 0.8rem;
</style>
